#{extends 'CRUD/layout.html' /}
<div id="crudShow" class="${type.name}">
    <h2 id="crudShowTitle">&{'crud.show.title', type.modelName}</h2>
    <div class="objectForm">
        #{form action:@save(object.id), enctype:'multipart/form-data'}
        #{crud.form}
	        #{crud.custom 'tags'}
		        <label for="tags">
		            &{'tags'}
		        </label>
		        <style type="text/css">
		            .tags-list .tag {
		                cursor: pointer;
		                padding: 1px 4px;
		            }
		            
		            .tags-list .selected {
		                background: #222;
		                color: #fff;
		            }
		        </style>
		        <script type="text/javascript">
		            var toggle = function(tagEl){
		                var input = document.getElementById('h' + tagEl.id);
		                if (tagEl.className.indexOf('selected') > -1) {
		                    tagEl.className = 'tag';
		                    input.value = '';
		                }
		                else {
		                    tagEl.className = 'tag selected';
		                    input.value = tagEl.id;
		                }
		            }
		        </script>
		        <div class="tags-list">
		            #{list items:models.Tag.findAll(), as:'tag'}<span id="${tag.id}" onclick="toggle(this)" class="tag ${object.tags.contains(tag) ? 'selected' : ''}">${tag}</span>
		            <input id="h${tag.id}" type="hidden" name="${fieldName}" value="${object.tags.contains(tag) ? tag.id : ''}" />#{/list}
		        </div>
			#{/crud.custom}
        #{/crud.form}
        <p class="crudButtons">
            <input type="submit" name="_save" value="&{'crud.save', type.modelName}" /><input type="submit" name="_saveAndContinue" value="&{'crud.saveAndContinue', type.modelName}" />
        </p>#{/form}
    </div> #{form @delete(object.id)}
    <p class="crudDelete">
        <input type="submit" value="&{'crud.delete', type.modelName}" />
    </p>#{/form}
</div>